<style>
  /* overlay */
  .md-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    visibility: hidden;
    top: 0;
    left: 0;
    z-index: 999;
    opacity: 0;
    background: rgba(1, 1, 1, 0.6);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
  }
  .active {
    opacity: 1;
    visibility: visible;
  }
  /* slider */
  .slider {
    position: fixed;
    top: 0;
    left: -350px;
    width: 350px;
    height: 100%;
    background: #007ee5;
    z-index: 1000;
    transition: all 0.5s ease-in-out;
  }
  .open {
    left: 0;
  }
</style>
<div id="root">
  {{x}}
  <div :class="isActive?'open':''" class="slider"></div>
  <div :class="isActive?'active':''" class="md-overlay"></div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.prod.js"></script>
<script type="module">
  const { createApp, ref, onBeforeUpdate } = Vue;
  import { usePosition } from "./useMouse.js";
  import { useOverLayByComputed, useOverLayByWatch } from "./useScreen.js";
  const App = {
    setup() {
      const { x } = usePosition();
      // const isActive = useOverLayByComputed(x);
      let isActive = ref(false);
      onBeforeUpdate(() => {
        isActive.value = useOverLayByWatch(x)();
      });
      return {
        isActive,
        x,
      };
    },
  };
  createApp(App).mount("#root");
</script>
